<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ref字符串方式</title>
</head>

<body>
    <h1>ref字符串方式</h1>
    <ol>
        <li></li>
    </ol>
    <hr />
    <div id="demoReact"></div>
    <script src="../../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../../node_modules/react/umd/react.development.js"></script>
    <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">

        class MyCom extends React.Component {

            fun = () => {
                // let input = document.querySelector("#demoInput");
                // console.log("input.value = ",input.value);
                console.log(this.refs.demoInput.value);
            }

            render() {
                return (
                    <div>
                        <div>我是一个类组件</div>
                        <input type="text" ref="demoInput" replaceholder="请输入" />
                        <button onClick={this.fun}>点我得到输入框的值</button>
                    </div>
                )
            }
        }

        // 创建根节点
        let root = ReactDOM.createRoot(document.getElementById("demoReact"));

        // 渲染组件
        root.render(<MyCom />);
    </script>
</body>

</html>